<template>

    <a-popover :title="fileName" >
        <div slot="content" style="text-align:center">
            <a @click="handleDown()">
                <a-icon type="cloud-download"/>
                下载
                <AkFileDown :url="url" ref="AkFileDown"/>
            </a>
        </div>
        <a-icon type="file-pdf" :style="`fontSize:${imgHeight}px`" @click="handlerPreview"/>
        <a-modal :title="fileName" width="80%" v-model="visible" @cancel="handleOk" @ok="handleOk">
            
            <iframe   :src="url" frameborder="0" width="100%" height="500px" scrolling="auto">
                您的浏览器不支持pdf预览
            </iframe>
        
        </a-modal>
    </a-popover> 
    
</template>
<script>
import AkFileDown from './AkFileDown';
export default {
    name:"AkPdfPreview",
    describe:"pdf预览",
    components:{AkFileDown},
    props:{
        url:{
            type:String,
            required:true
        },
        fileName:{
            type:String,
            required:false,
            default:''
        },
        imgHeight:{
            type:Number,
            required:false,
            default:50
        }
    },
    data(){
        return {
          
            visible:false,
            
        }
    },
    methods:{
        handleDown(){
            this.$refs.AkFileDown.down();
        },
        handlerPreview(){
            this.visible = true;
        },
        handleOk(){
            this.visible = false;
        }

    }

}
</script>
<style scoped>
pre{
  white-space:pre-wrap;
  white-space:-moz-pre-wrap;
  white-space:-pre-wrap;
  white-space:-o-pre-wrap;
  word-wrap:break-word;
}
</style>